<template>
  <div class="serverinfo">
    <van-popup v-model="show" closeable  round  class="col-xs-10 col-sm-6 col-md-5" >
      <van-field/>
      <van-cell-group v-for="(v,k) in dangefwqinfo">
        <van-field :label="k | dangeName" :value="v" readonly />
      </van-cell-group>
      <div class="text-center">
        <van-button type="info" style="margin:10px 10px 10px 0" @click="server_edit(dangefwqinfo)">编辑</van-button>
        <van-button type="danger" style="margin:10px 0 10px 10px" @click="server_del(dangefwqinfo.id)">删除</van-button>
      </div>
    </van-popup>
    <table class="table table-striped table-hover">
      <thead>
      <tr>
        <th>服务器IP</th>
        <th>设备时间</th>
        <th>服务商</th>
        <th>地域</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="v in server_jbxx" :key="v.id">
        <td>{{ v.ip }}</td>
        <td>{{ v.dqsj }}</td>
        <td>{{ v.fws }}</td>
        <td>{{ v.dy }}</td>
        <td style="padding-top: 0;padding-bottom:0;vertical-align: middle"><van-button type="info" @click.prevent="longlongsee(v)" size="mini">查看</van-button></td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import utils from "@/utils/time"
import qs from 'qs'
import {getServer, outServer} from "../../utils/api";
export default {
  name: "ServerInfo",
  created() {
    getServer().then(respose=>{
      if(respose?.status==200){
        this.server_jbxx = respose?.body;
        this.server_jbxx.map((item)=>{
          item.dqsj = utils.timestampToTime(item.dqsj,3) //时间戳转换成格式
        })
      }else{
        this.$message.error(respose?.msg);
      }
    }).catch(error=>{
      console.log(error);
    })
  },
  data(){
    return {
      server_jbxx:[],
      show:false,
      dangefwqinfo:''
    }
  },
  methods:{
    longlongsee(v){
      this.show=true;
      this.dangefwqinfo=v
    },
    server_edit(v){
      this.$router.push({name:"edit",params:{id:v.id,ip:v.ip,yhm:v.yhm,mm:v.mm,dqsj:v.dqsj,fws:v.fws,dy:v.dy,yyz:v.yyz,bz:v.bz}});
    },
    server_del(id){
      this.$dialog.confirm({
        message: '您确定要删除了吗？',
      }).then(() => {
        outServer(qs.stringify({id: id})).then(respose => {
          if(respose.status===200){
            this.$toast.success("删除成功");
            this.server_jbxx=this.server_jbxx.filter((item,index,arr)=>{
              return item.id!==id;
            })
          }else{
            this.$toast.fail("删除失败");
          }
        }).catch(error => {
          console.log(error);
          this.$toast.fail("删除失败");
        })
        this.show=false;
      }).catch(() => {})
    }
  },
  filters:{
    dangeName(v){
      let result=''
      switch (v){
        case "id":
          result="用户ID"
          break;
        case "ip":
          result="服务器IP地址"
          break;
        case "mm":
          result="登录密码"
          break;
        case "yhm":
          result="登录账户"
          break;
        case "dqsj":
          result="设备到期时间"
          break;
        case "fws":
          result="服务商"
          break;
        case "dy":
          result="地域"
          break;
        case "yyz":
          result="拥有者"
          break;
        case "del":
          result="是否删除"
          break;
        case "bz":
          result="备注"
          break;
        default:
          result = "未找到选项"
          break;
      }
      return result;
    }
  }
}
</script>

<style scoped>

</style>
